{% extends 'baykeshop/base_site.html' %}

{% load shop_tags %}

{% block extrastyle %}
<style>
.parent-cate, .sub-cate {min-height: 45px;}
.parent-cate ul li{width: 80px; text-align: center;}
.parent-cate ul li a{ display: inline-block; height: 45px; line-height: 45px;color: rgba(28, 28, 28, 0.818);}
.parent-cate ul li a.active{border-bottom: 2px solid red; color: red;}
</style>
{% endblock %}

{% block title %}
  {% if cate_obj and cate_obj.parent %}
    {{ cate_obj.parent.name }}-{{ cate_obj.name }}
  {% elif cate_obj and cate_obj.parent is None %}
    {{ cate_obj.name }}
  {% else %}
    全部商品
  {% endif %}
{% endblock %}

{% block breadcrumb %}
<div class="container">
  <nav class="breadcrumb is-marginless mt-3 mb-3 is-small" aria-label="breadcrumbs">
    <ul>
      <li><a href="{% url 'baykeshop:home' %}">首页</a></li>
      {% if cate_obj and cate_obj.parent %}
      <li><a href="{% url 'baykeshop:cate_detail' cate_obj.parent.id %}">{{ cate_obj.parent.name }}</a></li>
      <li class="is-active"><a href="#" aria-current="page">{{ cate_obj.name }}</a></li>
      {% elif cate_obj and cate_obj.parent is None %}
      <li class="is-active"><a href="#" aria-current="page">{{ cate_obj.name }}</a></li>
      {% else %}
      <li class="is-active"><a href="#" aria-current="page">{% if word %}{{ word }}{% else %}全部商品{% endif %}</a></li>
      {% endif %}
    </ul>
  </nav>
</div>
{% endblock %}

{% block content %}
{{ params|json_script:"params" }}
<div class="container goods">
  <div class="cates mb-3">
    <div class="parent-cate has-background-white">
      <ul class="is-flex is-flex-wrap-wrap">
        {% for cate in cates %}
        <li>
          <a class="{% if cate_obj.id == cate.id or cate_obj.parent.id == cate.id %} active {% endif %}" 
              href="{% url 'baykeshop:cate_detail' cate.id %}?order={{ params.order }}">{{ cate.name }}
          </a>
        </li>
        {% endfor %}
      </ul>
    </div>
    <div class="sub-cate spu-filter has-background-white mt-3 pl-5 pr-3">
      <ul class="is-flex is-flex-wrap-wrap pt-4 mb-1">
        <li class="has-text-centered"><a class="has-text-grey-light">分类:</a></li>
        <li class="has-text-left pl-3"><a class="{% if not cate_obj %} has-text-danger-dark {% else %} has-text-black-ter {% endif %}" href="{% url 'baykeshop:spus' %}?order={{ params.order }}">全部分类</a></li>
        {% for sub_cate in sub_cates %}
        <li class="has-text-left pl-3">
          <a class="{% if cate_obj.id == sub_cate.id %} has-text-danger-dark {% else %} has-text-black-ter {% endif %}" 
          href="{% url 'baykeshop:cate_detail' sub_cate.id %}?order={{ params.order }}">{{ sub_cate }}</a>
        </li>
        {% endfor %}
      </ul>
      <ul class="is-flex is-flex-wrap-wrap pb-3">
        <li class="has-text-centered"><a class="has-text-grey-light">筛选:</a></li>
        <li class="has-text-left pl-3">
          {% if params.order == '-sales' %}
          <a class="{% if 'sales' in request.get_full_path %} has-text-danger-dark {% else %} has-text-black-ter {% endif %}" href="{{ request.path }}?order=sales{% if params.page %}&page={{ params.page }}{% endif %}">
            销量
            <span class="mdi mdi-arrow-down"></span>
          </a>
          {% else %}
          <a class="{% if 'sales' in request.get_full_path %} has-text-danger-dark {% else %} has-text-black-ter {% endif %}" href="{{ request.path }}?order=-sales{% if params.page %}&page={{ params.page }}{% endif %}">
            销量
            {% if params.order == 'sales' %}
            <span class="mdi mdi-arrow-up"></span>
            {% endif %}
          </a>
          {% endif %}
        </li>
        <li class="has-text-left pl-3">
          {% if params.order == '-price' %}
          <a class="{% if 'price' in request.get_full_path %} has-text-danger-dark {% else %} has-text-black-ter {% endif %}" href="{{ request.path }}?order=price{% if params.page %}&page={{ params.page }}{% endif %}">
            价位
            <span class="mdi mdi-arrow-down"></span>
          </a>
          {% else %}
          <a class="{% if 'price' in request.get_full_path %} has-text-danger-dark {% else %} has-text-black-ter {% endif %}" href="{{ request.path }}?order=-price{% if params.page %}&page={{ params.page }}{% endif %}">
            价位
            {% if params.order == 'price' %}
            <span class="mdi mdi-arrow-up"></span>
            {% endif %}
          </a>
          {% endif %}
        </li>
      </ul>
    </div>
  </div>

  {% page_list request page_obj %}
</div>
{% endblock %}


{% block extra_script %}
  <script>
    var params = JSON.parse(document.getElementById('params').textContent);
    pageGoods._data.params = params
  </script>
{% endblock %}
  